/* 默认亮暗黑主题  black */
/* :root等效与html */
:root {
	/* 变量命名方式：属性名-序号/对应属性的英文值 */

	/* 字体颜色 */
	--color-white: #fff;
	--color-1: #FFD83D;
	--color-2: #848484;
	--color-3: #F4D144;
	--color-4: #676D7E;
	--color-5: #818181;
	--color-6: #FFD83D;
	--color-7: #050B18;
	--color-8: #FFD83D;
	--color-9: #FFFFFF;
	--color-10: transparent;
	--color-11: #FFFFFF;
	--color-12: #5F73A3;
	--color-13: #FFD83D;
	--color-14: #FFFFFF;
	--color-15: #252E43;
	--color-16: #F4CF3C;
	--color-17: #fff;
	--color-18: #7583A4;
	--color-19: #F4CF3C;
	--color-20: #050B18;
	--color-21: #FFD83D;
	--color-22: #050B18;
	--color-23: #050B18;
	--color-24: #252E43;
	--color-25: #FFD83D;
	--color-26: #FFD83D;
	--color-27: #050B18;
	--color-28: #050B18;
	--color-29: #567ED9;
	--color-30: #8799C0;
	--color-31: #A1A1A1;
	--color-32: #FFD83D;
	--color-33: #848484;
	--color-34: #8092B7;
	--color-35: #898F9F;
	--color-36: #8092B7;
	--color-37: #fff;
	--color-38: #252E43;
	--color-39: #1DC135;
	--color-40: #E42324;
	--color-41: #FFD83D;

	/* 背景颜色 */
	--bg-1: #050B18;
	--bg-2: #252C3F;
	--bg-3: #0D1320;
	--bg-4: #252C3F;
	--bg-transparent: transparent;
	--bg-5: #131824;
	--bg-6: #6A67F1;
	--bg-7: #181D2C;
	--bg-8: #050B18;
	--bg-9: #131824;
	--bg-10: rgba(204, 181, 155, 0.1);
	--bg-11: #050B18;
	--bg-12: #1F2430;
	--bg-13: #FFD83D;
	--bg-14: #1B2232;
	--bg-15: #252E43;
	--bg-16: #393929;
	--bg-17: #68683D;
	--bg-18: linear-gradient(180deg, #181D28 0%, #050B18 100%);
	--bg-19: #131824;
	--bg-20: rgba(5, 11, 24, 1);
	--bg-21: rgba(56, 64, 82, 0.7);
	--bg-22: rgba(11, 18, 32, 0.8);
	--bg-23: #F4CF3C;
	--bg-24: #101726;
	--bg-25: #252C3F;
	--bg-26: #FFD83D;
	--bg-27: #050B18;
	--bg-28: #050B18;
	--bg-29: #6A67F1;
	--bg-30: #131824;
	--bg-31: #1B2232;
	--bg-32: #FFD83D;
	--bg-33: #47453E;
	--bg-34: #252E43;
	--bg-35: #0D1320;
	--bg-36: #292D32;
	--bg-37: #1D2331;
	--bg-38: #252E43;
	--bg-39: #050B18;
	--bg-40: #1B2232;
	--bg-41: #292D32;
	--bg-42: #14244B;
	--bg-43: linear-gradient(180deg, #6A67F1 0%, #2E2ACF 100%);
	--bg-44: #252E43;
	--bg-45: #1C2333;
	--bg-46: #676D7E;
	--bg-47: transparent;
	--bg-48: #292D32;
	--bg-49: #252E43;
	--bg-50: #fff;
	--bg-51: #fff;
	--bg-52: #292D32;
	--bg-53: #45506B;

	/* 背景图片 */
	--bg-image-1: url('@/static/image/Home/notice-icon-black.png');
	--bg-image-2: url('@/static/image/Invite/title-bg-black.png');
	--bg-image-3: url('@/static/image/auth/bg@2x-black.png');
	--bg-image-4: url('@/static/image/auth/small-black.png');

	/* 整体边框 */
	--border-1: 2px solid rgba(255, 255, 255, 0.5);

	/* 边框颜色 */
	--border-color-1: #FFD83D;
	--border-color-2: #131824;
	--border-color-3: transparent;
	--border-color-4: transparent;

	/* 阴影颜色 */
	--box-shadow-color-1: transparent;
	--box-shadow-color-2: transparent;
	--box-shadow-color-3: transparent;
	--box-shadow-color-4: transparent;
	--box-shadow-color-5: transparent;
}

/* 使用自定义属性,判断html元素是否带有自定义属性red */
html[data-theme='red'] {
	/* 字体颜色 */
	--color-white: #FFFFFF;
	--color-1: #E7481A;
	--color-2: #FF8A4A;
	--color-3: #FFFFFF;
	--color-4: #5C5150;
	--color-5: #B6A297;
	--color-6: #B6A297;
	--color-7: #FFFFFF;
	--color-8: #A76452;
	--color-9: linear-gradient(180deg, #FF521C 0%, #824812 100%);
	--color-10: #D9AEA0;
	--color-11: #FFFFFF;
	--color-12: #B6A297;
	--color-13: #FFFFFF;
	--color-14: #E7481A;
	--color-15: #613826;
	--color-16: #fff;
	--color-17: #FF8A4A;
	--color-18: #B6A297;
	--color-19: #FF8A4A;
	--color-20: #fff;
	--color-21: #fff;
	--color-22: #E7481A;
	--color-23: #050B18;
	--color-24: #6C483A;
	--color-25: #FF8A4A;
	--color-26: #FF8A4A;
	--color-27: #915545;
	--color-28: #FFFFFF;
	--color-29: #B3A096;
	--color-30: #fff;
	--color-31: #fff;
	--color-32: #E7481A;
	--color-33: #AB988F;
	--color-34: #B3A096;
	--color-35: #B3A096;
	--color-36: #7E6963;
	--color-37: #E7481A;
	--color-38: #FF8A4A;
	--color-39: #E7481A;
	--color-40: #DC2020;
	--color-41: #DF8911;

	/* 背景颜色 */
	--bg-1: #2A0F0C;
	--bg-2: linear-gradient(192deg, #FF531E 0%, #9A1E07 100%);
	--bg-3: linear-gradient(180deg, #481B0F 0%, #040108 79%);
	--bg-4: #8B4131;
	--bg-transparent: transparent;
	--bg-5: #2A0F0C;
	--bg-6: #E7481A;
	--bg-7: #1A090A;
	--bg-8: #2A0F0C;
	--bg-9: rgba(204, 181, 155, 0.1);
	--bg-10: #1B090A;
	--bg-11: #3E1A10;
	--bg-12: linear-gradient(180deg, #431A0C 0%, #110620 100%);
	--bg-13: linear-gradient(192deg, #FF531E 0%, #9A1E07 100%);
	--bg-14: #64281C;
	--bg-15: #763021;
	--bg-16: rgba(231, 72, 26, 0.5);
	--bg-17: linear-gradient(192deg, #FF531E 0%, #9A1E07 100%);
	--bg-18: linear-gradient(180deg, #342725 0%, #0B0409 100%);
	--bg-19: rgba(204, 181, 155, 0.10);
	--bg-20: rgba(204, 181, 155, 0.20);
	--bg-21: rgba(204, 181, 155, 0.3);
	--bg-22: rgba(0, 0, 0, 0.3);
	--bg-23: linear-gradient(192deg, #FF531E 0%, #59190D 100%);
	--bg-24: #2A0F0C;
	--bg-25: #3E1A10;
	--bg-26: #E45123;
	--bg-27: #471B0F;
	--bg-28: linear-gradient(192deg, #FF531E 0%, #9A1E07 100%);
	--bg-29: #E7481A;
	--bg-30: rgba(204, 181, 155, 0.2);
	--bg-31: rgba(204, 181, 155, 0.2);
	--bg-32: linear-gradient(192deg, #FF531E 0%, #9A1E07 100%);
	--bg-33: #3E1A10;
	--bg-34: #624C47;
	--bg-35: linear-gradient(180deg, #481B0F 0%, #040108 79%);
	--bg-36: #6C483A;
	--bg-37: #451A12;
	--bg-38: #42150C;
	--bg-39: #BA2A00;
	--bg-40: rgba(204, 181, 155, 0.1);
	--bg-41: #0D0C13;
	--bg-42: transparent;
	--bg-43: linear-gradient(180deg, #FF4C17 0%, #C93617 100%);
	--bg-44: #6C483A;
	--bg-45: #532D22;
	--bg-46: linear-gradient(192deg, #9328B9 0%, #271045 100%);
	--bg-47: #9E31D1;
	--bg-48: #624C47;
	--bg-49: rgba(108, 72, 58, 1);
	--bg-50: #e7481a;
	--bg-51: transparent;
	--bg-52: #3E1A10;
	--bg-53: #2F1315;

	/* 背景图片 */
	--bg-image-1: url('@/static/image/Home/notice-icon-red.png');
	--bg-image-2: url('@/static/image/Invite/title-bg-red.png');
	--bg-image-3: url('@/static/image/auth/bg@2x-red.png');
	--bg-image-4: url('@/static/image/auth/small-red.png');

	/* 整体边框 */
	--border-1: none;

	/* 边框颜色 */
	--border-color-1: #E7481A;
	--border-color-2: #E1481A;
	--border-color-3: #fff;
	--border-color-4: #e1481a;

	/* 阴影颜色 */
	--box-shadow-color-1: #FF916C;
	--box-shadow-color-2: 0px 0px 10px 0px rgba(26, 12, 9, 1);
	--box-shadow-color-3: inset 0px 2px 2px 0px rgba(255, 145, 108, 1);
	--box-shadow-color-4: inset 0px 4px 4px 0px #FF916C;
	--box-shadow-color-5: inset 0px 4px 4px 0px #FF916C;
}